import React, { memo, useEffect, useState, useRef } from "react";
import type { ReactNode, FC } from "react";
import Edit from "../../img/edit.png";
import Delete from "../../img/delete.png";
import { Link, useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
interface IProps {
  children?: ReactNode;
}
interface IPost {
  id: number;
  title: string;
  desc: string;
  username: string;
  replyId: number;
  replyContent: string;
}
const Single: FC<IProps> = () => {
  const [post, setPost] = useState<IPost>();
  const [content, setContent] = useState();
  const location = useLocation();
  const navigate = useNavigate();
  const replyRef = useRef();
  const postId = location.pathname.split("/")[2];

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(`/posts/${postId}`);
        setPost(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, [postId]);
  const handleReply = () => {
    const contentValue = (replyRef.current as any).value;
    setContent(contentValue);
  };
  return (
    <div className="single">
      <div className="content">
        <div className="user">
          <div className="info">
            <span>{post?.username}</span>
          </div>
          {/* {currentUser.username === post.username && (
            <div className="edit">
              <Link to={`/write?edit=2`} state={post}>
                <img src={Edit} alt="" />
              </Link>
              <img onClick={handleDelete} src={Delete} alt="" />
            </div>
          )} */}
        </div>
        <h1>{post?.title}</h1>
        <p
          dangerouslySetInnerHTML={{
            __html: post?.desc as string
          }}
        ></p>
        <div>回帖</div>
        <div>{content}</div>
        <textarea
          ref={replyRef as any}
          defaultValue={"这里应该获取当前用户信息和发帖用户信息"}
        ></textarea>
        <button onClick={handleReply}>点击回帖</button>
      </div>
    </div>
  );
};
export default memo(Single);
